<template>
  <div>
    <div style="margin: 0 auto;width: 1200px;">

      <div style="margin: 50px 0 50px 500px;">
        <el-steps :active="1" space="300px" align-center>
          <el-step title="1.加入购物车 " description=""></el-step>
          <el-step title="2.填写核对订单信息" description=""></el-step>
          <el-step title="3.完成订单" description=""></el-step>
        </el-steps>
      </div>

      <div style="margin: 80px;">
        <h3>我的购物车</h3>
        <template>
          <el-table :data="tableData" border style="padding: 0;margin: 0;" max-height="1000">
            <el-table-column fixed prop="product" label="商品" width="435"></el-table-column>
            <el-table-column prop="attribute" label="属性" width="200"></el-table-column>
            <el-table-column prop="price" label="单价" width="120"></el-table-column>
            <el-table-column prop="count" label="购买数量" width="100"></el-table-column>
            <el-table-column prop="subtotal" label="小计" width="100"></el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
                           type="text" size="small">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div style="overflow: hidden">
        <div style="width: 1200px;margin-left: 83px;color:#F55A19;">
        ※　温馨提示 ：付费配件可以用会员卡结算;
        </div>
        <div style="margin-right: 200px;position: relative;left: 900px;">
          <div>商品金额:1076元</div>
          <div>总计金额:1076元</div>
        </div>
        <el-divider></el-divider>
      </div>
      <div style="width: 1200px;margin-left: 83px;">
        <el-row>
          <el-button plain style="font-size: 20px">清空购物车</el-button>
          <el-button plain style="font-size: 20px;position: relative;left: 480px;" @click="$router.push('/')">继续购物</el-button>
          <el-button type="warning" style="font-size: 20px;position: relative;left: 530px;" @click="$router.push('/el-main/settlement')">开始结算</el-button>
        </el-row>
      </div>

      <div style="width: 1200px;margin: 50px 0 0 83px;color:#F55A19;">※　温馨提示：</div>
      <div class="cart-wxts-div">英制规格1磅：约13x13cm 1刀+5碟+5叉 适合2~5人</div>
      <div class="cart-wxts-div">英制规格2磅：约17x17cm 1刀+10碟+10叉 适合5~10人</div>
      <div class="cart-wxts-div">英制规格3磅：约23x23cm 1刀+15碟+15叉 适合9~15人</div>
      <div class="cart-wxts-div">英制规格5磅：约30x30cm 1刀+25碟+25叉 适合15~25人</div>
      <div class="cart-wxts-div">订购5磅以上规格的蛋糕请点击“在线客服”按钮进行咨询订购。</div>






    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      bannerArr:[],
      productArr:[],
      tableData: [{
        product: '2016-05-03',
        attribute: '王小虎',
        price: '上海',
        count: '普陀区',
        subtotal: '上海市普陀区金沙江路 1518 弄',
        right: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]

    }

  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    }
  },
  mounted() {

  }
}
</script>


<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.cart-wxts-div{
  font-size: 8px;
  margin-left: 83px;
}
</style>